<template>
  <div class="content">
    <el-row class="top">
      <el-col :span="12">
        <label class="top-left"><span>旅行主题:</span>
          <el-select v-model="themeId" class="top-left-select" placeholder="请选择" @change="queryThemeTravelByTheme">
            <el-option v-for="item in allTheme" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </label>
        <el-button type="primary">管理主题</el-button>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" class="top-right" @click="addTravel">添加旅行</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="listLoading"
      :data="themeTravelPage.list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="id" width="70" align="center">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="费用" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.price }}￥</template>
      </el-table-column>
      <el-table-column label="出发地" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.beginning }}</template>
      </el-table-column>
      <el-table-column label="主题" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.travelTheme.name }}</template>
      </el-table-column>
      <el-table-column label="活动类型" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.travelActivity.name }}</template>
      </el-table-column>
      <el-table-column label="旅行方式" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.travelWay.name }}</template>
      </el-table-column>
      <el-table-column label="热度" width="60" align="center">
        <template slot-scope="scope">{{ scope.row.hot }}</template>
      </el-table-column>
      <el-table-column label="天数" width="60" align="center">
        <template slot-scope="scope">{{ scope.row.days }}天</template>
      </el-table-column>
      <el-table-column label="图片" width="100" align="center">
        <template slot-scope="scope">
          <el-image fit="contain" :src="`${$imgApi}travel-img/${scope.row.img}`" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="scope" class="flex col item-do">
          <div>
            <el-button
              class="item-do-but"
              size="mini"
              type="success"
              @click="updateTravel(scope.$index, scope.row)"
            >修改</el-button>
            <el-button
              class="item-do-but"
              size="mini"
              type="danger"
              @click="deleteTravel(scope.$index, scope.row.id)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Page :page="themeTravelPage" @changePageNum="handleCurrentChange" @changePageSize="handleSizeChange" />
    <AddDialog
      :dialog-visible="addDialogVisible"
      @close="closeAddDialog"
      @added="edited"
    />
    <UpdateDialog
      :dialog-visible="updateDialogVisible"
      :travell="travel"
      @close="closeUpdateDialog"
      @edited="edited"
    />
  </div>
</template>

<script>
import { queryThemeTravelByTheme } from '@/api/theme-travel'
import Page from '@/components/Page'
import UpdateDialog from './updateDialog'
import AddDialog from './addDialog'
export default {
  components: {
    Page,
    UpdateDialog,
    AddDialog
  },
  data() {
    return {
      themeId: 0,
      allTheme: [],
      listLoading: false,
      themeTravelPage: {
        pageNum: 1
      },
      addDialogVisible: false,
      updateDialogVisible: false,
      travel: {}
    }
  },
  created() {
    if (this.$store.getters.themeTravel.activity.length < 1) {
      this.$store.dispatch('themeTravel/setActivity')
    }
    if (this.$store.getters.themeTravel.way.length < 1) {
      this.$store.dispatch('themeTravel/setWay')
    }
    this.queryAllTheme()
    this.queryThemeTravelByTheme()
  },
  methods: {
    async queryAllTheme() {
      const themes = await this.$store.dispatch('themeTravel/setTheme')
      this.allTheme = [...themes]
      this.allTheme.unshift({
        id: 0,
        name: '全部'
      })
    },
    queryThemeTravelByTheme() {
      this.listLoading = true
      queryThemeTravelByTheme(this.themeId, this.themeTravelPage.pageNum).then(res => {
        this.themeTravelPage = res.data
      }).catch(() => {
        this.themeTravelPage = {}
      }).finally(() => {
        this.listLoading = false
      })
    },
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`)
    },
    handleCurrentChange(pageNum) {
      this.themeTravelPage.pageNum = pageNum
      this.queryThemeTravelByTheme()
    },
    addTravel() {
      this.addDialogVisible = true
    },
    closeAddDialog() {
      this.addDialogVisible = false
    },
    deleteTravel(index, id) {
      this.$confirm('此操作将永久删除该旅行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updateTravel(index, travel) {
      this.travel = JSON.parse(JSON.stringify(travel))
      this.updateDialogVisible = true
    },
    edited(res) {
      const index = this.themeTravelPage.list.findIndex(item => {
        return item.id === res.travel.id
      })
      if (index > -1) {
        this.themeTravelPage.list[index] = res.travel
      }
      this.queryThemeTravelByTheme()
      this.closeUpdateDialog()
    },
    closeUpdateDialog() {
      const time = new Date().getTime()
      const index = this.themeTravelPage.list.findIndex(item => {
        return item.id === this.travel.id
      })
      if (index > -1) {
        const index1 = this.themeTravelPage.list[index].img.indexOf('?')
        if (index1 >= 0) {
          this.themeTravelPage.list[index].img = this.themeTravelPage.list[index].img.slice(0, index1)
        }
        this.themeTravelPage.list[index].img += `?time=${time}`
      }
      this.travel = {
        id: -1,
        travelTheme: {
          id: -1
        },
        travelActivity: {
          id: -1
        },
        travelWay: {
          id: -1
        }
      }
      this.updateDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  margin-bottom: 10px;

  &-left {
    float: left;

    &-select {
      margin: 0 10px;
    }
  }

  &-right {
    float: right;
  }
}

.item-do {
  justify-content: space-between;

  &-but {
    margin: 2px 0;
  }
}
</style>
